<template>
  <a-modal
    title="業主詳情"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div class="main-content">
        <a-row>
            <a-col :span="12"><h2 class="zkxx">業主信息</h2></a-col>
            <a-col :span="12" v-if="data.leaseStatus === 1">
              <a-button @click="$refs.editOwnerForm.edit(data)" type="primary" class="item-end" ghost>
                修改
              </a-button>
            </a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">業主姓名：{{ data.name }}</a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">聯繫方式：{{ data.phone }}</a-col>
        </a-row>
         <a-row class="main-content-item">
           <a-col :span="2" class="ydxx">相冊：</a-col>
           <a-col :span="4" v-for="(item, index) in data.fileList" :key="index" class="parImg">
                 <img :src="'/api/sysFileInfo/preview?id=' + item.fileId" style="max-width: 99%;width:100px"/>
            </a-col>
        </a-row>
      </div>
      <div class="main-content">
        <a-row>
            <a-col :span="12"><h2 class="zkxx">租約信息</h2></a-col>
            <a-col :span="12" v-if="data.leaseStatus === 1">
              <a-button @click="$refs.editOwnerLeaseForm.edit(data)" type="primary" class="item-end" ghost>
                修改
              </a-button>
            </a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">簽約房間：{{ data.roomName }}</a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">租期：{{ data.rentStartDate }} - {{ data.rentEndDate }}</a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">交租週期：{{ data.receiptCycle }}</a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">租金：{{ data.rent }}元</a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">押金：{{ data.deposit }}元</a-col>
        </a-row>
         <a-row class="main-content-item">
          <a-col :span="24">賬單起始日：起租日，提前{{ data.billEndTqData }}天收租</a-col>
        </a-row>
      </div>
      <div class="main-content">
        <a-row>
            <a-col :span="12"><h2 class="zkxx">其他信息</h2></a-col>
            <a-col :span="12" v-if="data.leaseStatus === 1">
              <a-button @click="$refs.editOwnerAcTxForm.edit(data)" type="primary" class="item-end" ghost>
                修改
              </a-button>
            </a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24" v-if="data.rentReminderSwitch === 1">收租提醒：提前{{ data.rentReminderDay }}天</a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">打款賬號：{{ statusFilter(data.accountType) }}</a-col>
        </a-row>
        <a-row class="main-content-item">
          <a-col :span="24">備註：{{ data.remark }}</a-col>
        </a-row>
      </div>
    </a-spin>
    <edit-owner-form ref="editOwnerForm" @ok="handleOk" />
    <edit-owner-lease-form ref="editOwnerLeaseForm" @ok="handleOk" />
    <edit-owner-ac-tx-form ref="editOwnerAcTxForm" @ok="handleOk" />
  </a-modal>
</template>
<script>
  import moment from 'moment'
  import { detailForEdit } from '@/api/modular/main/ownerlease/ownerLeaseManage'
  import editOwnerForm from './editOwnerForm.vue'
  import editOwnerLeaseForm from './editOwnerLeaseForm.vue'
  import editOwnerAcTxForm from './editOwnerAcTxForm.vue'
  export default {
     components: {
      editOwnerForm,
      editOwnerLeaseForm,
      editOwnerAcTxForm
    },
    data () {
      return {
        cardBankTypeData: [],
        rentReminderSwitchData: [],
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        data: {},
        fileList: [],
        roomList: [],
        id: 0
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (id) {
        this.id = id
        this.visible = true
        this.initNeedData(id)
        const cardBankTypeOption = this.$options
        this.cardBankTypeData = cardBankTypeOption.filters['dictData']('card_bank_type')
      },
      statusFilter (id) {
        // eslint-disable-next-line eqeqeq
        const values = this.cardBankTypeData.filter(item => item.code == id + '')
        if (values.length > 0) {
          return values[0].name
        }
      },
      initNeedData(id) {
        detailForEdit(id).then((res) => {
          if (res.code === 200) {
            this.data = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      handleSubmit () {
        this.handleCancel()
      },
      handleOk() {
         this.initNeedData(this.id)
      },
      handleCancel () {
        this.visible = false
        this.data = {}
        this.fileList = []
        this.roomList = []
        this.id = 0
      }
    }
  }
</script>
<style lang="less" scoped>
.zkxx{
  margin-left: 10px;
}
.item-end{
  float: right;
}
.main-content{
  margin-top: 10px;
  margin-bottom: 10px;
  border: solid 1px rgb(218, 211, 211);
}
.dj{
  border-bottom: solid 1px rgb(218, 211, 211);
}
.main-content-item{
  padding: 6px 10px;
  font-size: 16px;
}
</style>
